import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import { TextField, Row, Col, Button, Select, DateRangeWrapper, ButtonGroup } from '@folio/stripes/components';
import DatePerfectChoice from '../../util/DateCustomize/DatePerfectChoice';
import {  IfPermission } from '@folio/stripes/core';
class SearchForm extends Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
  }

    static propTypes = {
      handleSubmit: PropTypes.func.isRequired,
      initialValues: PropTypes.object,
      dictionary: PropTypes.object,
      cleanSearch: PropTypes.func,
      intl: PropTypes.func,
      exportExcel: PropTypes.func,
      ascriptionList:PropTypes.array
    };

    fieldChange = () => {
      const { handleSubmit } = this.props;
      this.setState(() => {
        handleSubmit();
      });
    };

    render() {
      const {
        handleSubmit,
        intl
      } = this.props;
      return (
        <div>
          <form data-test-form-page id="form-search" onSubmit={handleSubmit}>
            <Row style={{ width: '100%' }}>
              <Col xs={2}>
                <Field
                  component={Select}
                  name="propertyName"

                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                  dataOptions={this.props.ascriptionList}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={TextField}
                  name="barcode"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.readerAccount' })}
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={TextField}
                  name="readerName"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.readerName' })}
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />

              </Col>
              <DateRangeWrapper
                initialStartDate="2020-01-01"
                initialEndDate="2099-01-01"
                startValueGetter={(e, value) => {
                  return value;
                }}
                endValueGetter={(e, value) => {
                  return value;
                }}
              >
                {({
                  getStartInputProps,
                  getEndInputProps,
                  endDateExclude,
                  startDateExclude,
                }) => (

                  <Col xs={6}>
                    <Row>
                      <Col xs={4}>
                        {' '}
                        <Field
                          placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.partyStartDate' })}
                          name="partyStartDate"
                          component={DatePerfectChoice}
                          exclude={startDateExclude}
                          dateFormat="YYYY-MM-DD"
                          isClear
                          onRef={this.startDateRef}
                          {...getStartInputProps()}
                        />
                      </Col>

                      <Col xs={4}>
                        <Field

                          name="partyEndDate"
                          placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.partyEndDate' })}
                          component={DatePerfectChoice}
                          exclude={endDateExclude}
                          isClear
                          dateFormat="YYYY-MM-DD"
                          onRef={this.endDateRef}
                          {...getEndInputProps()}
                        />
                      </Col>
                      <Col xs={4}>
                        <ButtonGroup>

                          <Button type="submit">
                            <FormattedMessage id="ui-party.search" />
                          </Button>
                          < IfPermission perm={"ui-party.reader.report.manage.view.export"}>
                            <Button onClick={this.props.exportExcel}>
                              <FormattedMessage id="ui-party.export" />
                            </Button>
                          </IfPermission>

                        </ButtonGroup>
                      </Col>
                    </Row>
                  </Col>

                )
             }
              </DateRangeWrapper>

            </Row>
          </form>
        </div>
      );
    }
}

export default injectIntl(
  reduxForm({
    form: 'readerActSearchFrom',
    navigationCheck: true,
    enableReinitialize: true
  })(SearchForm)
);
